<template>
	<div>
		<ChooseMember
			v-model="show"
			:tabs="tabs"
			:members="members"
			:member-search-filter="memberSearchFilter"
			tree-obj-key="id">
			<template #tab-content="{meta:{rawObj}}">{{rawObj.label}}==名字很长的时候名字很长的时候名字很长的时候</template>
			<template #item-content="{item}">
				id:{{item.id}}, label:{{item.label}}
			</template>
		</ChooseMember>
		<Button type="primary" style="margin:20px" @click="show=true">选人</Button>
	</div>
</template>

<script>
import ChooseMember from '@/components/pc/choose-member';
import Button from '@/components/pc/button';
import {extend,MySet} from '@/util/common';

export default {
	name:'index',
	components:{
		ChooseMember,
		Button,
	},
	data(){
		const members=new MySet();
		for(let i=0;i<1e5;++i){
			members.add({id:i,label:'人员'+i});
		}
		Object.freeze(members);
		let tabs=['部门','组别','岗位','职级'];
		tabs=tabs.map((label) => {
			const data1=[];
			const data2=[];
			for(let i=0;i<1e4;++i){
				data1.push({id:'a'+i,label:'a组'+label+i});
				data2.push({id:'b'+i,label:'b组'+label+i,_treeTickable:i!==3,_treeNoTick:i===2});
			}
			return {
				label,
				tickable:true,
				data:[
					{
						id:'root',
						label:'单位',
						children:[
							{
								id:'a',
								label:'a组',
								children:data1,
							},{
								id:'b',
								label:'b组',
								children:data2,
							}
						],
					}
				],
				filter(item,members){
					console.log('过滤人员',extend({},item));
					let index=0;
					const res=new MySet();
					for(const member of members){
						if(index++<6){
							res.add(member);
						}
					}
					return res;
				}
			};
		});
		Object.freeze(tabs);
		return {
			show:false,
			members,
			tabs,
		};
	},
	methods:{
		memberSearchFilter(search,members){
			console.log('搜索人员');
			const res=new MySet();
			for(const member of members){
				if(member.label.indexOf(search)!==-1){
					res.add(member);
				}
			}
			return res;
		}
	}
};
</script>

<style lang="scss">

</style>
